<!DOCTYPE html>
<html lang="zh-EN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        height: 3000px;
    }

    .box1 {
        /* position: relative; */
        position: absolute;
        top: 100px;
        left: 100px;
        height: 200px;
        width: 200px;
        background-color: pink;
    }

    .box2 {
        position: absolute;
        z-index: 1;
        top: 30px;
        height: 50px;
        width: 50px;
        background-color: rgb(62, 19, 26);
    }

    .box3 {
        position: fixed;
        top: 100px;
        right: 40px;
        width: 300px;
        height: 300px;
        background-color: bisque;
    }

    .box4 {
        margin-top: 100px;
        position: sticky;
        top: 10px;
        width: 500px;
        height: 200px;
        background-color: blue;
    }
</style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <!-- 定位 = 定位模式 + 边偏移 -->
    <script>
    //1. 静态定位   -->  就是标准流
    //2. 相对定位(relative)   -->  相对于原来的坐标移动(不脱标,原来位置保留)
    //3. 绝对定位(absolute)   -->  相对于父元素定位(如果父级无定位以document文档为基准  脱标,原来位置不保留)
    //4. 固定定位(fixed)    -->  滚动页面时元素位置不动(以document文档为基准 脱标,不保留原来位置)
    //5. 粘性定位(sticky)  -->  以document文档为基准 不脱标
    // z-index: ;  数值越大,盒子越靠上
    //  加了绝对定位 不能用margin:auto 居中,
    //垂直水平居中    应该left:50%; margin-left: 自己盒子宽度的一半  top:50%; margin-top: 自己盒子高度的一半
   //如果给行内元素添加了定位就可以给行内元素设置宽高
   //浮动元素不会压住文字       浮动产生的最初目的就是为了文字环绕
   // 定位就算脱标也会压住文字
    </script>
</body>

</html>